<template>
  <div>
    
    <audio style="visibility:hidden;" id="webcam" autoplay="autoplay"></audio>
    <!-- <audio style="visibility:hidden;" id="zc-call-ringCam" autoplay="autoplay" src=""></audio> -->
    
    <!-- start 客户状态 -->
    <div v-if="isHaveZhiChiData" class="frame-quick-phoneServiceStatus">
      
      <i class="iconfont icon-dianhua1" @click="iconHandelClick"></i>
      
      <el-popover
        trigger="click"
        popper-class="agent-panel-popper"
        placement="bottom-end"
        v-show="currentAgentName && currentAgentStatusDisplayText"
        @input="agentPopoverToggle"
        ref="agentPopover"
      >
        <!-- start 当前电话状态 -->
        <span slot="reference" class="el-dropdown-link">
          <span class="status-text">
            {{ `电话客服(${ currentAgentName }):` }}
          </span>
          <span :style="currentAgentStyle">
            {{ currentAgentStatusDisplayText }} 
          </span>
        </span>
        <!-- end 当前电话状态 -->
        
        <div v-show="agentPopperVisible" class="agent-panel-popper-content">
          
          <div class="agent-panel-popper-content-state">
            
            <div class="agent-panel-popper-content-state-header">
              <!-- <span>
                坐席状态：
              </span> -->
              <el-select v-model="statusValue" @input="handlerCommandClick" placeholder="请选择">
                <el-option
                  v-for="item in statusList"
                  :key="item.statusDescription"
                  :label="item.statusDescription"
                  :value="item.status"
                >
                </el-option>
              </el-select>
              
              <el-tooltip content="修复" placement="top">
                <i class="iconfont icon-part" @click="openResetDialog"></i>
              </el-tooltip>
            </div>
            
            <!-- <el-dropdown placement="bottom" trigger="click" @command="handlerCommandClick">
              
              <span class="el-dropdown-link">
                <span class="agent-panel-popper-content-state-dot" :style="currentAgentStateDotStyle">
                </span>
                <span :style="currentAgentStyle">
                  {{ currentAgentStatusDisplayText }} 
                </span>
                <i class="iconfont icon-caret-down"></i>
              </span>
              
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item 
                  v-for="(item, index) in statusList" 
                  :key="index" 
                  :command="item.status"
                >
                  {{ item.statusDescription }}
                </el-dropdown-item>
              </el-dropdown-menu>
              
            </el-dropdown> -->
            
          </div>
          
          <div class="agent-panel-popper-content-offline" v-if="isOffline">
            目前离线，不支持呼叫
          </div>
          <dialpad @call="dialpadCallHandler" v-else />
          
        </div>
        
      </el-popover>
    </div>
    <!-- end 客户状态 -->
    
    <!-- start 通话弹窗 -->
    <div v-if="showCallCenter && callCenterData" class="call-center-box">
      
      <p class="customer-name">
        {{ callCenterData.name || '未知联系人' }}
      </p>
      
      <div class="divider"></div>
      
      <div class="call-ripple">
        <div class="icon-ripple">
          <img :src="phoneImage" />
          <div class="ripple1"></div>
          <div class="ripple2"></div>
        </div>
      </div>
      
      <p style="margin-top: 10px; font-size: 26px">
        {{ callStatusDisplayText }}：
        {{ callCenterData.phone }}
      </p>
      
      <p v-if="callAreaName">
        {{ callAreaName }}
      </p>
      
      <div class="flex-x call-opt-btn">
        
        <!-- start 呼入 -->
        <template v-if="callCenterData.isCallIn">
          <el-button type="primary" @click="agentListen">
            接听
          </el-button>
          <el-button type="danger" @click="agentHangUp">
            拒接
          </el-button>
        </template>
        <!-- end 呼入 -->
        
        <!-- start 呼出 -->
        <template v-if="callCenterData.isCallOut">
          <el-button type="danger" @click="agentHangUp">
            取消
          </el-button>
        </template>
        <!-- end 呼出 -->
      
      </div>
      
    </div>
    <!-- end 通话弹窗 -->
    
    <base-modal append-to-body title="修复通话" :show.sync="showResetDialog" class="callcenter-reset-container" width="500px" @closed="closeResetDialog">
    
      <div>
        <p>
          此功能可以解决电话条卡死等非常见问题；<br>
          修复后会将电话条重置为之前的可用状态。<br>
          点击修复按钮，不会结束当前的通话，通话还会继续，只是坐席状态变为“空闲”。<br>
          确定修复电话条？
        </p>
      </div>
      
      <div class="dialog-footer" slot="footer">
        <el-button @click="closeResetDialog">关闭</el-button>
        <el-button type="primary" @click="callcenterReset">保存</el-button>
      </div>
      
    </base-modal>
    
  </div>
</template>

<script>
/* api */
import * as CallCenterApi from '@src/api/CallCenterApi';
/* component */
import Dialpad from '@src/modules/system/frame/component/CallCenterZhiChi/Dialpad.vue'
/* enum */
import { ZhiChiAgentStateEnum, ZhiChiMessageTypeEnum } from '@model/biz/CallcenterZhichi.ts';
import { CallCenterTypeEnum } from '@model/enum/CallCenterEnum';
/* platform */
import platform from '@src/platform';
/* service */
import CallCenterService from '@service/CallCenterService';
/* util */
import CallCenterZhiChiUtil from '@src/util/callcenter/CallcenterZhiChi.ts'
import Log from '@src/util/log.ts'
import { loadScript } from '@src/util/dom';
import { storageGet, storageSet } from '@src/util/storageV2'
import { getMenuItemId } from '@src/util/menuIdUtil';

import { openAccurateTab } from '@src/util/platform'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { getOssUrl } from '@src/util/assets'
const phoneImage = getOssUrl('/phone.png')

const StorageKey = 'call-center-data'

const Online = 'online';
const Offline = 'offline';

const PhoneStatusMap = {
  0: {
    color: '#F9676F',
    text: '忙碌',
  },
  '-1': {
    color: '#8C8C8C',
    text: '离线',
  },
  1: {
    color: '#00C853',
    text: '空闲',
  },
  3: {
    color: '#00C853',
    text: '通话接通中',
  },
  114: {
    color: '#8C8C8C',
    text: '小休',
  },
  115: {
    color: '#8C8C8C',
    text: '后处理',
  },
  116: {
    color: '#8C8C8C',
    text: '培训',
  },
  117: {
    color: '#8C8C8C',
    text: '会议',
  },
  118: {
    color: '#8C8C8C',
    text: '用餐',
  },
  119: {
    color: '#8C8C8C',
    text: '活动',
  },
  99: {
    color: '#8C8C8C',
    text: '异常',
  }
}
import { validatePhone } from '@src/util/validator'

export default {
  name: 'call-center-zhi-chi',
  data() {
    return {
      phoneImage,
      agentPopperVisible: false,
      // 转接号码
      callTransferPhone: '',
      // 转接号码是否显示
      callTransferPhoneVisible: false,
      // 当前坐席信息
      currentAgent: {
        // 坐席邮箱
        'agentEmail': '',
        // 坐席名称
        'agentName': '',
        // 坐席id
        'agentid': '',
        // 公司id
        'companyId': '',
        // 当前接听电话的方式
        'call_way': '',
        // 应用ID
        'appId': '',
        // 坐席状态，忙碌，空闲，坐席状态，其中-1为离线，0为忙碌，1为空闲，3为通话接通中，114为小休，115为后处理，116为培训，117为会议，118为用餐，119为活动，99为异常
        'agentState': '',
        // 自定义忙碌分类
        'busyCause': ''
      },
      callCenterData: {
        // 联系人名称
        name: '',
        // 联系人电话
        phone: '',
        // 是否为呼入
        isCallIn: false,
        // 是否为呼出
        isCallOut: false,
        // 号码归属地-省
        numberProvice: '',
        // 号码归属地-市
        numberCity: '',
        // 通话ID
        callId: '',
        // 是否正在通话中
        isOnCall: false,
        // 是否显示当前通话
        isShowCurrentCall: false
      },
      callCenterOptions: {
        type: '',
        companyId: '',
        clientId: '',
        clientSecret: '',
        agentId: ''
      },
      // 记录列表
      callCenterRecordList: [],
      // 是否含有智齿呼叫中心数据
      isHaveZhiChiData: false,
      // 智齿呼叫中心脚本是否加载完成
      isLoadZhiChiScript: false,
      // 是否显示呼叫中心 来电/拨打电话弹窗
      showCallCenter: false,
      // 电话状态
      phoneStatusMap: PhoneStatusMap,
      statusValue: '',
      showResetDialog: false
    }
  },
  components: {
    Dialpad
  },
  computed: {
    /** 
     * @description 当前坐席的名称
    */
    currentAgentName() {
      return this.currentAgent?.agentName || '';
    },
    currentAgentStyle() {
      return {
        color: this.phoneStatusMap[this.currentAgent?.agentState]?.color || ''
      }
    },
    currentAgentStateDotStyle() {
      return {
        backgroundColor: this.phoneStatusMap[this.currentAgent?.agentState]?.color || ''
      }
    },
    currentAgentStatusDisplayText() {
      return this.phoneStatusMap[this.currentAgent?.agentState]?.text || '';
    },
    callStatusDisplayText() {
      if (this.callCenterData?.isCallIn) return '呼入';
      if (this.callCenterData?.isCallOut) return '呼出';
      return '';
    },
    callAreaName() {
      return this.callCenterData.numberProvice + this.callCenterData.numberCity;
    },
    /** 
     * @description 是否为离线
    */
    isOffline() {
      return this.currentAgent?.agentState == ZhiChiAgentStateEnum.Offline;
    },
    /** 
     * @description 是否显示转接
     * -- 暂不支持转接
    */
    isShowTransferSetting() {
      return false
    },
    statusList() {
      if (this.currentAgent?.agentState == -1) {
        return [
          {
            status: Online, 
            statusDescription: '上线 (空闲状态)'
          }
        ]
      }
      
      if (this.currentAgent?.agentState == 0) {
        return [
          {
            status: 1, 
            statusDescription: '空闲'
          },
          {
            status: Offline, 
            statusDescription: '下线/离线'
          }
        ]
      }
      
      if (this.currentAgent?.agentState == 1) {
        return [
          {
            status: 0, 
            statusDescription: '忙碌'
          },
          {
            status: 1, 
            statusDescription: '空闲'
          },
          {
            status: Offline, 
            statusDescription: '下线/离线'
          }
        ]
      }
      
      return [
        {
          status: Offline, 
          statusDescription: '下线/离线'
        }
      ]
    }
  },
  watch: {
    callCenterData(newValue) {
      storageSet(StorageKey, JSON.stringify(newValue));
    }
  },
  mounted() {
    CallCenterService.setIsCallCenterZhiChi(true)
    this.initialize()
    window.getZhiChiCallCenterData = this.outSideGetCallCenterData
    window.outsideQueryAgentState = this.outsideQueryAgentState
    window.outSideGetAgent = this.outSideGetAgent
  },
  methods: {
    /** 
     * @description 坐席弹窗切换
    */
    agentPopoverToggle(value) {
      this.agentPopperVisible = value
    },
    /** 
     * @description 通话接通
     * @returns {void}
    */
    agentListen() {
      CallCenterZhiChiUtil.agentListen()
      this.callCenterData.isOnCall = true
      this.callCenterData.isShowCurrentCall = true
      this.goCallCenterWorkbench()
    },
    /** 
     * @description 通话挂断
     * @returns {void}
    */
    agentHangUp() {
      CallCenterZhiChiUtil.agentHangUp(this.callCenterData.callId)
      this.callCenterData.isOnCall = false
      this.callCenterData.isShowCurrentCall = false
      this.goCallCenterWorkbench()
    },
    /** 
     * @description 坐席上班
     * @returns {void}
    */
    async agentWork() {
      await CallCenterZhiChiUtil.agentWork()
      this.queryAgentState()
    },
    /** 
     * @description 坐席下班
     * @returns {void}
    */
    async agentUnWork() {
      await CallCenterZhiChiUtil.agentUnWork()
      this.queryAgentState()
    },
    /** 
     * @description 更改呼入呼出状态
     * @param {Boolean} isCallIn 是否为呼入
     * @param {Boolean} isCallOut 是否为呼出
     * @returns {void}
    */
    changeCallCenterDataIsCall(isCallIn, isCallOut) {
      this.callCenterData.isCallIn = isCallIn
      this.callCenterData.isCallOut = isCallOut
    },
    dialpadCallHandler() {
      this.$refs.agentPopover.$refs.PublinkElement.$refs.ElElement.doClose()
    },
    /**
     * @description 获取联系人信息
     * @param {String} phone 呼入/呼出 电话号码
     */
    fetchLinkMenInfo(phone) {
      CallCenterApi.agentGetLinkmanInfo({ phone })
        .then(res => {
          
          if (res.success) {
            this.callCenterData = Object.assign({}, this.callCenterData, res.result || {})
            this.showCallCenter = true
          }
          
        })
        .catch(error => {
          Log.error(error, this.fetchLinkMenInfo.name)
        })
    },
    fetchCallCenterInfo() {
      return (
        CallCenterApi.getCallCenterAccountInfoUpdate()
          .then(data => {
            
            const isSuccess = data?.success
            const result = data?.result || {}
            // 是否存在智齿配置数据
            const isHaveZhiChiData = result?.[CallCenterTypeEnum.ZhiChi]
            
            if (isSuccess && isHaveZhiChiData) {
              
              this.isHaveZhiChiData = true
              this.callCenterOptions = Object.assign({}, this.callCenterOptions, result[CallCenterTypeEnum.ZhiChi])
              
              localStorage.setItem('call_center_agent', 1); //智齿呼叫中心 有数据说明就是绑定了坐席
            }
            
          }).catch(error => {
            Log.error(error, this.fetchCallCenterInfo.name)
          })
      )
    },
    /** 
     * @description 跳转呼叫中心工作台页面
    */
    goCallCenterWorkbench() {
      
      this.showCallCenter = false
      
      openAccurateTab({
        type: PageRoutesTypeEnum.PageSecurityCallcenterWorkbench,
        reload: true,
      });
    },
    /** 
     * @description 获取初始化回调函数配置
     * @returns {CallCenterZhiChiInitCallbackOptionsType} data 回调数据
    */
    getInitCallbackOptions() {
      return {
        // 开始通话
        onStart: this.handlerOnCallcenterStartEvent,
        // 坐席振铃
        onAgentRing: this.handlerOnCallcenterAgentRingEvent,
        // 坐席接通
        onAgentConnected: this.handlerOnCallcenterAgentConnectedEvent,
        // 用户接通
        onUserConnected: this.handlerOnCallcenterUserConnectedEvent,
        // 通话结束
        onStop: this.handlerOnCallcenterStopEvent
      }
    },
    getPhone(data) {
      
      if (data?.phone) {
        return data.phone
      }
      
      if (this.callCenterData.isCallIn) {
        return data.caller
      }
      
      if (this.callCenterData.isCallOut) {
        return data.callee
      }
      
      return ''
    },
    async handlerCommandClick(commandState) {
      
      // 下班
      if (commandState == Offline) {
        this.agentUnWork()
        return
      }
      
      // 离线中，需要先上班
      if (commandState == Online) {
        this.agentWork()
        return
      }
      
      // 更新坐席状态
      await CallCenterZhiChiUtil.updateAgentState(commandState)
      // 查询坐席信息
      this.queryAgentState()
      
    },
    /** 
     * @description 监听呼叫开始事件
     * @param {CallcenterZhiChi.CallbackStartServiceResult} data 回调数据
    */
    handlerOnCallcenterStartEvent(data) {
      
      this.callCenterRecordList.push(data)
      
      this.setCallInAndOut(data)
      
      this.setCallDataNumberAndId(data)
      
      const phone = this.getPhone(data)
      this.fetchLinkMenInfo(phone)
    },
    /** 
     * @description 监听坐席振铃事件
     * @param {CallcenterZhiChi.CallbackPhoneStateAgentRingResult} data 回调数据
    */
    handlerOnCallcenterAgentRingEvent(data) {
      
      this.callCenterRecordList.push(data)
      
      this.setCallInAndOut(data)
      
      this.setCallDataNumberAndId(data)
      
      const phone = this.getPhone(data)
      this.fetchLinkMenInfo(phone)
      
    },
    /** 
     * @description 监听坐席接通事件
     * @param {CallcenterZhiChi.CallbackPhoneStateAgentConnectedResult} data 回调数据
    */
    handlerOnCallcenterAgentConnectedEvent(data) {
      
      this.callCenterRecordList.push(data)
      
      this.setCallInAndOut(data)
      
      if (this.callCenterData.isCallIn) {
        this.showCallCenter = false
        this.callCenterData.isOnCall = true
        this.callCenterData.isShowCurrentCall = true
        this.goCallCenterWorkbench()
      }
      
    },
    /** 
     * @description 监听用户接通事件
     * @param {CallcenterZhiChi.CallbackPhoneStateUserConnectedResult} data 回调数据
    */
    handlerOnCallcenterUserConnectedEvent(data) {
      this.callCenterRecordList.push(data)
      this.showCallCenter = false
      this.callCenterData.isOnCall = true
      this.callCenterData.isShowCurrentCall = true
      this.goCallCenterWorkbench()
    },
    /** 
     * @description 监听通话结束事件
     * @param {CallcenterZhiChi.CallbackStopServiceResult} data 回调数据
    */
    handlerOnCallcenterStopEvent(data) {
      this.callCenterRecordList.push(data)
      this.showCallCenter = false
      this.callCenterData.isOnCall = false
      this.callCenterData.isShowCurrentCall = false
      
      // 发起通话后，挂断电话，重新刷新页面，支持会回调回来结束的信息，所以这里特殊判断下，如果是此场景，不需要跳转呼叫中心工作台页面
      let isFirstStop = this.callCenterRecordList?.[0]?.msgType == ZhiChiMessageTypeEnum.StopService
      if (!isFirstStop && this.callCenterRecordList.length == 1) {
        this.goCallCenterWorkbench()
      }
    },
    loadZhiChiScript() {
      const scripts = [
        'https://www.soboten.com/paas/component/common/jquery.json-2.4.min.js',
        'https://www.soboten.com/paas/component/common/verto-min-1.1.js',
        'https://www.soboten.com/paas/component/plugin/call_1.8.js'
      ]
      const microTasks = scripts.map(scriptUrl => loadScript(scriptUrl))
      
      return (
        Promise.all(microTasks)
          .then(() => {
            this.isLoadZhiChiScript = true
          })
          .catch(error => {
            Log.error('智齿呼叫中心脚本加载失败', this.loadZhiChiScript.name)
            Log.error(error, this.loadZhiChiScript.name)
          })
      )
      
    },
    async initialize() {
      try {
        // 1. 首先获取呼叫中心数据
        await this.fetchCallCenterInfo()
        
        // 不含有智齿呼叫中心数据，则不初始化
        if (!this.isHaveZhiChiData) return
        
        // // 2. 初始化智齿script脚本
        // await this.loadZhiChiScript()
        
        // // 初始化智齿script脚本失败则退出
        // if (!this.isLoadZhiChiScript) return
        
        // 3. 初始化智齿呼叫中心配置
        this.initZhiChi()
        
      } catch (error) {
        Log.error(error, this.initialize.name)
      }
    },
    async initZhiChi() {
      try {
        
        const initCallbackOptions = this.getInitCallbackOptions()
        
        // 1. 首先初始化
        CallCenterZhiChiUtil.init(this.callCenterOptions, initCallbackOptions)
        // 2. 获取token
        await CallCenterZhiChiUtil.getToken()
        // 3. 获取坐席状态
        await this.queryAgentState()
        
        // 4. 如果查询结果状态不是离线  单独重连
        if (this.currentAgent.agentState != ZhiChiAgentStateEnum.Offline) {
          this.reConnect()
        }
        
      } catch (error) {
        Log.error(error, this.init.name)
      }
    },
    isShowStatusItem(statusItemData) {
      return statusItemData?.status != this.currentAgent.agent_state;
    },
    /** 
     * @description 图标点击跳转呼叫中心工作台
    */
    iconHandelClick() {
      this.goCallCenterWorkbench()
    },
    outSideGetAgent() {
      return this.currentAgent || {}
    },
    outsideQueryAgentState() {
      return this.queryAgentState()
    },
    outSideGetCallCenterData() {
      
      let localStorageData = {}
      
      try {
        localStorageData = JSON.parse(storageGet(StorageKey, '{}'))
      } catch (error) {
        localStorageData = {}
      }
      
      if (!this.callCenterData?.callId) {
        this.callCenterData.callId = localStorageData.callId
      }
      
      return this.callCenterData
    },
    closeResetDialog() {
      this.showResetDialog = false
    },
    openResetDialog() {
      this.agentPopperVisible = false
      this.showResetDialog = true
    },
    callcenterReset() {
      this.closeResetDialog()
      
      CallCenterZhiChiUtil.resetStatus().then(() => {
        this.queryAgentState()
      })
      
    },
    /** 
     * @description 查询坐席状态
    */
    async queryAgentState() {
      const { data, isSuccess } = await CallCenterZhiChiUtil.queryAgentState()
        
      if (isSuccess) {
        this.currentAgent = data
        this.statusValue = this.currentAgentStatusDisplayText
      }
      
      if (data?.agentState == 3) {
        this.callCenterData.isOnCall = true
      }
      
      return this.currentAgent
    },
    /** 
     * @description 重新连接
    */
    reConnect() {
      CallCenterZhiChiUtil.reConnect();
    },
    setCallInAndOut(data = {}) {
      // 呼入
      if (data.direction == 0) {
        this.changeCallCenterDataIsCall(true, false)
      }
      // 呼出
      else if (data.direction == 1) {
        this.changeCallCenterDataIsCall(false, true)
      }
      // 默认
      else {
        this.changeCallCenterDataIsCall(false, false)
      }
    },
    setCallDataNumberAndId(data = {}) {
      this.callCenterData.numberProvice = data.numberProvice
      this.callCenterData.numberCity = data.numberCity
      this.callCenterData.callId = data.callId
    },
    /** 
     * @description 设置坐席的转接手机号
    */
    async updateTransferPhone(){
      
      const regMobile = PHONE_REG
      
      if(this.callTransferPhone && !validatePhone(this.callTransferPhone, 1)){
        this.$message.error('请输入正确的手机号')
        return
      }
      
    },
  }
}
</script>

<style scoped lang="scss">
  .frame-quick-phoneServiceStatus{
    font-size: 14px;
    padding: 0 15px;
    .status-text{
      color: #8C8C8C;
    }
    .icon-dianhua1{
      color: #8C8C8C;
      cursor: pointer;
    }
    
  }
.call-center-box{
  position: fixed;
  width: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center top;
  z-index: 2001;
  background: #fff;
  border: 1px solid #ebeef5;   

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .customer-name{
    color: $text-color-main;
    font-size: 24px;
    margin: 14px 0;
    color: #333;
  }
  p > span {
    color: #ed3f14;
  }

  .divider{
    height: 1px;
    width: 100%;
    background: #f5f5f5;
  }

  .call-ripple{
    position:relative;
    width: 90px;
    height: 90px;
    .icon-ripple {
      position: absolute; 
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
      }
      div[class^="ripple"] {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 48px;
          height: 48px;
          box-shadow: 0 0 1.5px $color-primary;
          border-radius: 50%;
          animation: ripple 1.2s linear infinite;
      }
      div.ripple2 {
          animation-delay: 0.4s;
      }
      
    }
  }
  
  .call-in,.call-out{
    width: 100%;
    display: flex;
    // flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 10px;
    a {
      width: 50%;
      text-decoration: underline;
      color: $color-primary-light-6;
      padding: 0 10px;
      cursor: pointer;
      margin-bottom: 10px;
      font-size: 16px;
      &:nth-child(odd) {
        text-align: right;
      }
      &:nth-child(even) {
        text-align: left;
      }
    }
  }

  .call-opt-btn {
    margin: 10px 0 20px 0;
  }

  .last{
    width: 100%;
    background:#FB602C;
    height: 26px;
    padding: 4px 0;
    margin-bottom: 0;
    color: #fff;
    opacity: 0.8;
    text-align: center;
  }

  @keyframes ripple {
    0% {}
    50% {
        width: 70px;
        height: 70px;
        opacity: 1;
    }
    100% {
        width: 90px;
        height: 90px;
        opacity: 0;
    }
  }

}
</style>
<style lang="scss">
  .custom-popper{
    z-index: 99 !important;
  }
  .call-transfer{
    .icon-shezhi{
      color: rgb(140, 140, 140) !important;
      font-size: 14px;
    }
  }
  .call-transfer-main{
    color: rgb(140, 140, 140);
    .desc{
      margin-bottom: 10px;
    }
    .el-input-group__append{
      border: 1px solid #e0e1e2 !important;
      border-radius: 0 !important;
      padding: 0;
      .subBtn{
        width: 100%;
        text-align: center;
        padding: 0 15px;
        cursor: pointer;
      }
    }
  }
</style>

<style lang="scss">
.frame-quick-phoneServiceStatus {
  .el-dropdown-link {
    cursor: pointer;
  }   
}
.call-center-box {
  .el-button--danger:hover, .el-button--danger:focus {
    background: #f78989;
    border-color: #f78989;
    color: #fff;
  }
}

.agent-panel-popper-content {
  border-radius: 6px;
  height: 402px;
  padding-top: 12px;
}

.agent-panel-popper-content-state {
  
  user-select: none;
  
  border: 0;
  /* background-color: #EFF3FA;
  color: #6d7894; */
  border-radius: 2px;
  font-size: 14px;
  font-weight: 400;
  width: 100%;
  height: 32px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  cursor: pointer;
  
  .el-dropdown-link {
    i {
      color: #9c9c9c;
      font-size: 12px;
    }
  }
}

.agent-panel-popper-content-state-header {
  display: flex;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  .el-select {
    width: 100%;
  }
  i {
    width: 30px;
    height: 30px;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.agent-panel-popper-content-state-dot {
  display: inline-block;
  border-radius: 4px;
  width: 8px;
  height: 8px;
}

.agent-panel-popper-content-offline {
  width: 262px;
  height: 364px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.callcenter-reset-container {
  z-index: 4000 !important;
  .base-modal-body {
    padding: 20px;
    line-height: 30px;
  }
}
</style>
